<template>
  <header class="my-header">
    <div class="left">
      <div class="link" @click="handleClick">
        {{ baseName }}
      </div>
    </div>
    <div class="middle">当前学期：{{ currentSemesterName }}</div>
    <div class="right">
      <a-dropdown class="avater" @click="avatorClick">
        <a class="ant-dropdown-link">
          {{ userInfo.username || "未登录" }}
          <a-avatar class="avator" :size="48" :src="userInfo.avatarUrl">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item v-for="(item, index) in dropItem" :key="index">
              <span :href="item.href" @click="item.handleClick">{{
                item.title
              }}</span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </header>
  <LoginModal
    @close="modalHandle"
    :modal-show="modalShow"
    :modal-tab="modalTab"
  ></LoginModal>
</template>

<script lang="ts">
export default {
  name: "my-header",
};
</script>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { UserOutlined } from "@ant-design/icons-vue";
import userRole, { roleType } from "@/store/useRole";
import semesterName from "@/store/semesterName";
import { storeToRefs } from "pinia";
import { computed, ref, watch } from "vue";
import LoginModal from "./component/loginModal.vue";
import { useLocalStorage } from "@vueuse/core";
import { getUserInfoByToken } from "@/api/methods/userReq";
import { userInfo, userInfoJson } from "@/utils/userInfo";

const { currentSemesterName } = storeToRefs(semesterName());
const modalTab = ref(1);
const modalShow = ref(false);
const modalHandle = (show: boolean) => {
  modalTab.value = 1;
  modalShow.value = show;
};
const token = useLocalStorage<string>("token", "");
const dropItem = computed(() => {
  if (userInfo.value?.role != 0 && !userInfo.value.role) {
    return [
      {
        title: "点击登录",
        handleClick: () => {
          router.push({ name: "login" });
        },
      },
    ];
  } else {
    return [
      {
        title: "退出登录",
        handleClick: () => {
          // 清空localStorage内容
          token.value = "";
          userInfoJson.value = "";
          router.push({ path: "/" });
        },
        href: "",
      },
      {
        title: "修改密码",
        handleClick: () => {
          updataPassWord();
        },
      },
    ];
  }
});
const updataPassWord = () => {
  modalTab.value = 2;
  modalShow.value = true;
};
// token发生变化 重新获取信息 存到Local
watch(
  token,
  async () => {
    if (!!token.value) {
      const res = await getUserInfoByToken();
      if (res?.data) {
        userInfoJson.value = JSON.stringify(res.data);
      }
    }
  },
  { immediate: true }
);
const baseName = import.meta.env.APP_ROOT_NAME;
const router = useRouter();
const avatorClick = () => {
  if (JSON.stringify(userInfo.value) === "{}") {
    router.push({ name: "login" });
  }
};
const handleClick = () => {
  router.push({
    path: "/",
  });
};
</script>

<style scoped lang="scss">
.my-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0.1px 0.1px 20px #999;
  .left {
    flex: 1;
    .link {
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 40px;
  }
}
</style>
